<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="岗位名称">
        <el-input v-model="form.name" style="width: 25%"></el-input>
      </el-form-item>
      <el-form-item label="统计时间">
        <el-col>
          <el-date-picker
            v-model="startAndEnd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="pieSubmit">生成柱状图</el-button>
        <el-button type="primary" @click="barSubmit">生成柱状图</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="resumeStatistics">简历统计</el-button>
    <el-button type="primary" @click="jobStatistics">岗位统计</el-button>
    <el-button type="primary" @click="pushStatistics">推送统计</el-button>
    <div v-if="false" style="width: auto;height: 400px" id="pie"></div>

    <div>
      <div v-if="resume.pieDisplay" style="width: 650px;height: 400px; display: inline-block; float: left;" id="resumePieByYear"></div>
      <div v-if="resume.lineDisplay" style="width: 650px;height: 400px; display: inline-block; float: left;" id="resumeLineByYear"></div>
      <div v-if="resume.pieDisplay" style="width: 650px;height: 400px; display: inline-block; float: left;" id="resumePieByMonth"></div>
      <div v-if="resume.lineDisplay" style="width: 650px;height: 400px; display: inline-block; float: left;" id="resumeLineByMonth"></div>
    </div>
    <div>
      <div v-if="station.pieDisplay" style="width: 650px;height: 400px; display: inline-block; float: left;" id="stationPieByYear"></div>
      <div v-if="station.lineDisplay" style="width: 650px;height: 400px; display: inline-block; float: left;" id="stationLineByYear"></div>
      <div v-if="station.pieDisplay" style="width: 650px;height: 400px; display: inline-block; float: left;" id="stationPieByMonth"></div>
      <div v-if="station.lineDisplay" style="width: 650px;height: 400px; display: inline-block; float: left;" id="stationLineByMonth"></div>
    </div>
    <div>

      <div v-if="station.pieDisplay" style="width: 650px;height: 400px; display: inline-block; float: left;" id="pushPieByYear"></div>
    </div>
  </div>

</template>

<script>
import { pieResumeChartByYear, lineResumeChartByYear, pieResumeChartByMonth, lineResumeChartByMonth } from "@/api/system/resume";
import { pieStationChartByYear, lineStationChartByYear, pieStationChartByMonth, lineStationChartByMonth } from "@/api/system/station";

export default {
  name: "index",
  data() {
    return {
      form: {
        name: '',
        startTime: '',
        endTime: '',
      },
      startAndEnd: '',
      pieResponse: '',
      //echarts用到的数据
      //按年
      pieData: [],
      lineData: {
        name: [],
        data: []
      },
      //各个模块div的显示
      resume: {
        pieDisplay: false,
        lineDisplay: false
      },
      station: {
        pieDisplay: false,
        lineDisplay: false
      },
      push: {
        pieDisplay: false,
        lineDisplay: false
      }
    }
  },
  methods: {
    barSubmit(){

    },
    pieSubmit() {
      this.form.startTime = this.startAndEnd[0].toString()
      this.form.endTime = this.startAndEnd[1].toString()
      echartsPie(this.form).then(response => {
        console.log(response)
        this.pieResponse = response.rows
        this.echartsPie()
        this.pieResponse = ''
      })
    },
    //饼图模型
    echartsPie(id,subtext) {
      this.$echarts.init(document.getElementById(id)).setOption({
        //标题组件，包含主标题和副标题。
        title: {
          //主标题文本，支持使用 \n 换行。
          text: '统计图',
          //副标题文本，支持使用 \n 换行。
          subtext: subtext,
          //title 组件离容器左侧的距离。    标题图上位置
          left: 'center'
        },
        //提示框组件。 鼠标放在图标上时会有提示框
        tooltip: {
          //是否显示提示框组件。
          show: true,
          //触发类型。 item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          trigger: 'item'
        },
        //图例组件。 图例组件展现了不同系列的标记(symbol)，颜色和名字。
        legend: {
          //图例列表的布局朝向。horizontal:横向分布 vertical:竖向分布
          orient: 'vertical',
          //图例组件离容器左侧的距离。
          left: 'left'
        },
        //文档上并没有说什么组件，但是这里面基本上时
        series: [
          {
            //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            name: '统计',
            //pie:饼图 bar:柱状图
            type: 'pie',
            //饼图的半径。可以为:数字，百分号，数组
            //饼图半径，可以是数字，
            //饼图半径，可以是百分比
            //饼图半径，可以是数组，如果是数组的话是一个环形图,数组时，前一个表示环内部半径，后一个表示外部半径
            radius: 150,
            //系列中的数据内容数组。数组项可以为单个数值
            data: this.pieData,
            //高亮状态的扇区和标签样式。
            emphasis: {
              itemStyle: {
                //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                shadowBlur: 10,
                //阴影水平方向上的偏移距离。
                shadowOffsetX: 0,
                //阴影颜色。支持的格式同color。
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    //线图模型
    echartsLineFoundation(id){
      this.$echarts.init(document.getElementById(id)).setOption({
        xAxis: {
          type: 'category',
          data: this.lineData.name
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.lineData.data,
            type: 'line'
          }
        ]
      })
    },
    //简历的年月统计
    resumeStatistics(){
      //显示简历统计的div
      this.resume.pieDisplay = true;
      this.resume.lineDisplay = true;
      //隐藏岗位统计的div
      this.station.pieDisplay = false;
      this.station.lineDisplay = false;
      //发送请求生成饼图按年
      pieResumeChartByYear().then(response => {
        // console.log(response)
        this.pieData = response.data;
        this.echartsPie("resumePieByYear","按年统计");
        this.pieData = [];
      });
      //发送请求生成线图按年
      lineResumeChartByYear().then(response => {
        // console.log(response)
        this.lineData.data = response.data.data;
        this.lineData.name = response.data.name;
        this.echartsLineFoundation("resumeLineByYear");
        this.lineData = {};
      });
      //发送请求生成饼图按月
      pieResumeChartByMonth().then(response => {
        // console.log(response)
        this.pieData = response.data;
        this.echartsPie("resumePieByMonth","按月统计");
        this.pieData = [];
      });
      //发送请求生成线图按月
      lineResumeChartByMonth().then(response => {
        // console.log(response)
        this.lineData.data = response.data.data;
        this.lineData.name = response.data.name;
        this.echartsLineFoundation("resumeLineByMonth");
        this.lineData = {};
      });
    },
    //岗位的年月统计
    jobStatistics(){
      //显示岗位统计的div
      this.resume.pieDisplay = false;
      this.resume.lineDisplay = false;
      //隐藏简历统计的div
      this.station.pieDisplay = true;
      this.station.lineDisplay = true;
      //发送请求生成饼图按年
      pieStationChartByYear().then(response => {
        // console.log(response)
        this.pieData = response.data;
        this.echartsPie("stationPieByYear","按年统计");
        this.pieData = [];
      });
      //发送请求生成线图按年
      lineStationChartByYear().then(response => {
        // console.log(response.data.data)
        this.lineData.data = response.data.data;
        this.lineData.name = response.data.name;
        this.echartsLineFoundation("stationLineByYear");
        this.lineData = {};
      });
      //发送请求生成线图按月
      pieStationChartByMonth().then(response => {
        // console.log(response)
        this.pieData = response.data;
        this.echartsPie("stationPieByMonth","按月统计");
        this.pieData = [];
      });
      //发送请求生成线图按月
      lineStationChartByMonth().then(response => {
        // console.log(response)
        this.lineData.data = response.data.data;
        this.lineData.name = response.data.name;
        this.echartsLineFoundation("stationLineByMonth");
        this.lineData = {};
      });
    },
    //推送的年月统计
    pushStatistics(){

    }
  }
}
</script>

<style scoped>

</style>
